<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>陆运订单录入列表</title>
  <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
  <!-- <link rel="stylesheet" href="src/css/vue-style.css"> -->
  <style>
    *{
      box-sizing: border-box;
    }
    ul,li{
      list-style: none;
    }
    .city-choice{
      width: 900px;
      font-size: 14px;
      padding: 10px 20px;
      margin: 50px auto; 
      border-radius: 4px; 
      box-shadow: 0 0 10px rgba(0, 0, 0, .2);
      background: #f5f5f5;
    }
    .city-choice dl{
      display: flex;
      position: relative;
      margin-bottom: 20px;
    }
    .city-choice dl dt{
      display: inline-flex;
      width: 50px;
    }
    .city-choice dl dd span{
      margin-right:10px;
      padding:5px 10px;
      cursor: pointer;
    }
    .city-list{
      padding: 10px 20px;
      background: #fff;
      overflow: hidden;
      position: absolute;
      left: 50px;
      right: 0;
      z-index: 2;
    }
    .city-list li{
      float: left;
      min-width: 80px;
      line-height: 32px;
    }
    .city-list li label{
      margin-right: 20px;
    }
    .selected-city_list{
      border-top: 1px solid #ccc;
      padding-top: 10px;
      margin-top: 20px;
      padding-left: 70px;
      overflow: hidden;
    }
    .selected-city_list p{
      float: left;
      width: 70px;
      margin-left: -70px;
    }
    .selected-city_list div{
      float: left;
      width: 100%;
    }
    .selected-city_list span{
      display: inline-block;
      height: 24px;
      line-height: 24px;
      color: #fff;
      padding: 0 5px 0 10px;
      border-radius: 4px;
      background: #4fa1a4;
      margin: 0 10px 10px 0;
      white-space: nowrap;
    }
    .selected-city_list span i{
      font-size: 16px;
      margin-left: 5px;
      cursor: pointer;
    }
    .current{
      color: #fff;
      background: #4fa1a4;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="city-choice">
      <dl v-for="(group, di) in cityData" class="PinyinGroup">
        <dt>{{group.title}}</dt>
        <dd v-for="(province, pi) in group.data" v-bind:key="pi">
          <span v-on:click="provinceToggle(di, pi)" v-bind:code="province.code" v-bind:class="{'current':province.expand == true}">{{
            province.value }}</span>
          <ul class="city-list" v-if="province.expand == true">
            <li v-for="(city, ci) in province.children">
              <label><input type="checkbox" :checked="city.checked" @change="OnCityChecked(province,city)" />
                {{city.value}}</label>
            </li>
          </ul>
        </dd>
      </dl>
      <div class="selected-city_list">
        <p>您已选择：</p>
        <div>
            <span v-for="item in checkedCities">{{item.province.value}}{{(item.city||{}).value}}
              <i class="ivu-icon ivu-icon-md-close" v-on:click="delCity(item)"></i>
            </span>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        selectedItems: [],
        cityData: [],
        A2Z: [{
            title: 'A-G',
            arr: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
          },
          {
            title: 'H-K',
            arr: ['H', 'I', 'J', 'K'],
          },
          {
            title: 'L-S',
            arr: ['L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S'],
          },
          {
            title: 'T-Z',
            arr: ['T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
          },
        ],
        active: false,
        calcHeight: 0,
      },
      computed: {
        checkedCities() {
          let cities = [];

          if (this.cityData.length == 0) {
            return cities;
          }

          this.cityData.forEach(g => {
            g.data.forEach(p => {
              if (p.children[0].checked) {
                cities.push({
                  province: p,
                  city: null
                });
              } else {
                p.children.forEach(c => {
                  if (c.checked) {
                    cities.push({
                      province: p,
                      city: c
                    });
                  }
                });
              }
            });
          });

          return cities;
        }
      },
      mounted() {

      },
      created() {
        this.getCityData();
      },
      methods: {
        getCityData() {
          // 拼音排序
          var by = function (name) {
            return function (o, p) {
              var a, b;
              if (typeof o === "object" && typeof p === "object" && o && p) {
                a = o[name];
                b = p[name];
                if (a === b) {
                  return 0;
                }
                if (typeof a === typeof b) {
                  return a < b ? -1 : 1;
                }
                return typeof a < typeof b ? -1 : 1;
              } else {
                throw ("error");
              }
            }
          };
          axios.get('../static/city.json').then(res => {
            let args = res.data.Province;

            //按拼音首字母分拣数据
            this.A2Z.forEach((group) => {
              let item = [],
                selectItem = [],
                groupie = {},
                selectGroupie = {};
              group.arr.forEach((PY) => {
                  args.forEach((prov) => {
                    if (prov.PinYin[0] === PY) {
                      prov.expand = false;
                      prov.children.unshift({
                        "code": "000000",
                        "value": "全选"
                      });
                      item.push(prov);

                      prov.children.forEach(city => city.checked = false);

                      console.log(prov);
                    }
                  })
                }),
                item = item.sort(by("PinYin"));
              groupie.title = group.title;
              groupie.data = item;

              selectGroupie.title = group.title;
              selectGroupie.data = selectItem;

              this.cityData.push(groupie);
              this.selectedItems.push(selectGroupie);
            })
            this.provinceToggle(0, 0);
            // this.cityData[0].data[0].expand = true;
          })
        },
        provinceToggle(di, pi) {
          this.cityData.forEach((x) => {
            x.data.forEach((y) => {
              y.expand = false;
            });
          });
          this.cityData[di].data[pi].expand = true;

          this.$nextTick(() => {
            let ch = document.getElementsByClassName('city-list')[0].clientHeight,
              wrappers = document.getElementsByClassName('PinyinGroup');

            for (var i = 0; i < wrappers.length; i++) {
              wrappers[i].style.height = 'auto';
            }
            let wh = wrappers[di].clientHeight - 10; //这个10随便你调，这个算出来的就是整个dl的高度；
            mergedHeight = ch + wh;
            wrappers[di].style.height = `${mergedHeight}px`;
          })
        },
        OnCityChecked(province, city) {
          city.checked = !city.checked;

          if (city.code == '000000') {
            province.children.forEach(item => {
              if (item != city) {
                item.checked = city.checked;
              }
            });
          } else {
            province.children[0].checked = province.children.filter(i => i.code != '000000' && i.checked == false).length == 0;
          }
        },
        delCity(item){
          if(item.city == null){
            item.province.children.forEach(i=>i.checked =false);
          }else{
            item.city.checked = false;
          }
        }
      }
    })
  </script>
</body>

</html>